/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/SearchUserPanel/group.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType, watch } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

import { t } from '@src/locales'

export type SearchUserPanelProps = {
  // 标题
  title: string;
  // 是否显示查看更过
  isShowMore: boolean;
}

export interface SearchUserPanelSetupState {
  
}

export enum SearchUserPanelEmitEventNameEnum {
  Input = 'input',
  More = 'more',
}

export type SearchUserPanelInstance = ComponentInstance & SearchUserPanelSetupState
export type SearchUserPanelVM = ComponentRenderProxy<SearchUserPanelProps> & CommonComponentInstance & SearchUserPanelInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserSearchUserGroup,
  emits: [
    SearchUserPanelEmitEventNameEnum.Input,
    SearchUserPanelEmitEventNameEnum.More
  ],
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    isShowMore: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: SearchUserPanelProps, { emit }) {
    
    const onClickMoreHandler = () => {
      emit(SearchUserPanelEmitEventNameEnum.More)
    }
    
    return {
      onClickMoreHandler
    }
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserSearchUserGroup}>
        
        {this.title && (
          <div class="base-select-user-search-user-group__title">
            {this.title}
          </div>
        )}
        
        { this.$slots.default }
        
        {this.isShowMore && (
          <div 
            class="base-select-user-search-user-group__more"
            onClick={this.onClickMoreHandler}
          >
            {t('common.base.tip.checkoutForMoreSearchResult')}
          </div>
        )}
        
      </div>
    )
  }
})
